import React, {Component} from "react";
import Hello from "./components/Hello";
import Tab from "./components/Tab"

export default class LayOut extends Component{
    constructor(props) {
        super(props)
        this.state = {
            flag: true
        }
    }

    changeFlag = () => {
        this.setState({
            flag: !this.state.flag
        })
        // this.setState(() => {
        //     this.state.count++
        //     return {
        //         count: this.state.count
        //     }
        // })
    }

    componentWillUnmount() {
        console.log("LayOut   componentWillUnmount");
    }


    render() {
       const {flag} = this.state
        return (
            <div>
                <button onClick={this.changeFlag}>父组件外部删除 hello 组件</button>
                {flag && <Hello></Hello>}
            </div>
        )
    }
  
}


// export default function LayOut() {
   
//     return(
//         <div>
//           <Hello />
//           <Tab />
//         </div>
//     )
// }